<template>
	<view class="chargeOff">
		<!-- <uni-nav-bar title="扫码核销" left-icon="left" @clickLeft="navBack" backgroundColor="#2CB9A4" color="#F8F8F8"></uni-nav-bar> -->
		<view class="scanCode" v-show="showScan">
			<BarScan ref="qrcode" @ok="getResult" @err="geterror" v-if="showScan"></BarScan>
		</view>
		<view class="hexiao">
			<view class="item">
				<view class="u-demo-block">
					<text class="u-demo-block__title">输入电子码：</text>
					<view class="u-demo-block__content">
						<u--input placeholder="请输入正确的电子码" border="surround" v-model="formData.write_number"
							@blur="writeNumber"></u--input>
					</view>
				</view>
			</view>
			<view class="tips" style="margin: 20rpx 0;">
				提示：输入电子码或者扫码二维码
			</view>
			<view class="item" style="margin-top: 58%;">
				<u-button class="custom-style" text="扫描二维码"
					customStyle="background: #2CB9A4 ;color:#fff;margin-top:20px;border-radius: 30px;"
					@click="scanCode">
				</u-button>
			</view>
			<view class="item" style="margin-top: 60rpx;" v-if="type_list.length != 0&&!showScan">
				<view class="">
					核销类型：
				</view>
				<view class="x-bc" style="flex: 1;position: relative;">
					<vvSelect placeholder="请选择类型" class="select" :list="type_list" label="name" valueKey="id"
						ref="vvSelect1" @change="pickerChange">
					</vvSelect>
					<view class="icon_arrow_down">
						<u-icon name="arrow-down" color="#555555" size="20"></u-icon>
					</view>
				</view>
			</view>
			<view class="tips item" v-if="type_list.length==0&&showTips">
				您已扫码成功，请确认核销！
			</view>
			<view class="item" >
				<u-button class="custom-style" text="确认核销"
					customStyle="background: #fff ;border: 1rpx solid;color:#2CB9A4;margin-top:0px;border-radius: 30px;"
					@click="goAuth">
				</u-button>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		writeOff,
		getCardType, //核销商店商品
		writeOffGoods, ////核销普通商品
	} from '@/request/api.js'
	import BarScan from '@/components/qrcode.vue'
	// import BarScan from '@/components/dumenghanfengScanCode/scanCode.vue'
	// const scanner = uni.requireNativePlugin('Ba-Scanner')
	import vvSelect from '@/components/vv-select/vv-select.vue'
	let qrcode = require('@/utils/qrcode.js') // 导入这个文件，这个文件随便放在哪里，看个喜好
	var _self;
	export default {
		components: {
			BarScan,
			vvSelect,
		},
		data() {
			return {
				type: undefined, //0为普通，1为其他商品
				codeId: '', //扫码之后的id
				showTips: false,
				type_list: [

				],
				formData: {
					write_number: '',
					id: ''
				},
				result: '',
				showScan: false,
				writeData: { //真正核销的数据
					write_number: '',
					id: ''
				}
			};
		},
		onLoad() {
			// this.getCardType()
		},
		beforeDestroy() {
			this.result = ''
			this.type_list = []
			this.type = undefined //默认为普通商品
		},
		methods: {
			writeNumber() {
				let num = Number(this.formData.write_number)

				// console.log(num, 222, this.formData.write_number)
				this.type_list = []
				this.writeData.id = ''
				if (isNaN(num)) {
					this.getCardType()
				} else {
					this.writeData.write_number = this.formData.write_number
				}
			},
			async regularOff() {
				// console.log(this.writeData)
				// return false;
				let res = await writeOffGoods({
					id: this.writeData.id,
					write_number: this.writeData.write_number
				})
				this.type_list = []
				this.showTips = false
				this.type = undefined //默认为普通商品
				uni.showToast({
					icon: 'none',
					title: '核销成功'
				})
			},
			async Off() {
				if (!this.writeData.id) {
					uni.showToast({
						icon: 'none',
						title: '请选择核销类型'
					})
					return false;
				}
				// console.log(this.writeData)
				// return false;
				let res = await writeOff({
					mycardlog_id: this.writeData.id
				})
				this.type_list = []
				this.writeData.id = ''
				this.type = undefined //默认为普通商品
				uni.showToast({
					icon: 'none',
					title: '核销成功'
				})
			},
			async goAuth() {

				if (this.type == 1||this.type == 3) { // 有type的时候说明是扫码进来的非普通商品
					this.Off()
					return;
				}
				if (this.type == 0) { //有type的时候说明是扫码进来的普通商品
					this.regularOff()
					return;
				}
				let num = Number(this.formData.write_number)
				if (num == 0) {
					uni.showToast({
						icon: 'none',
						title: '请输入核销码'
					})
					return false;
				}
				if (isNaN(num)) { //输入的不是数字，根据输入的类型判断是否是普通商品，非数字就不是普通商品
					this.Off()
					return;
				}
				if (!isNaN(num)) { //输入的是数字，根据输入的类型判断是否是普通商品，非数字就不是普通商品
					this.regularOff()
					return;
				}

			},
			async getCardType() {
				this.writeData.id = '' //每次搜索都清空id
				let res = await getCardType(this.formData)
				// console.log(res,111)
				this.type_list = res.data.log
				this.type_list.forEach(item => {
					item['name'] = item.card_type_name
				})
				console.log(this.type_list)
			},
			getQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				var r = this.result.match(reg); //获取url中"?"符后的字符串并正则匹配
				var context = "";
				if (r != null)
					context = decodeURIComponent(r[2]);
				reg = null;
				r = null;
				return context == null || context == "" || context == "undefined" ? "" : context;
			},
			scanCode() {
				this.showScan = true
				// let that = this
				// // 调用uni提供的调用相机api
				// uni.chooseImage({
				// 	sizeType: ['original'],
				// 	count: 1,
				// 	success: res => {
				// 		const tempFilePaths = res.tempFilePaths[0] // 获取到二维码图片的链接
				// 		qrcode.decode(tempFilePaths); // 解析二维码图片
				// 		qrcode.callback = res1 => {
				// 			console.log(res1)
				// 			if (res1 == "error decoding QR Code") {
				// 				uni.showToast({
				// 					title: "识别二维码失败，请重新上传！",
				// 					duration: 2000,
				// 					icon: 'none'
				// 				})
				// 			} else {
				// 				// 解析成功返回二维码链接
				// 				let text = escape(res1)
				// 				let text1 = unescape(res1)
				// 				console.log(text, 11111, text1)
				// 				console.log(res1) // 这打印的是扫码扫出来的东西

				// 			}
				// 		}
				// 	}
				// });
			},
			pickerChange(e, name) {
				// console.log(e,name)
				this.writeData.id = e
			},
			getResult(result) {
				this.result = result;
				this.type = this.getQueryString('type')
				this.codeId = this.getQueryString('id')
				this.formData.write_number = ''
				this.formData.id = ''
				this.type_list = []
				if (this.type == 1||this.type == 3) { //此时不是普通商品
					this.formData.id = this.codeId //将id赋值给搜索条件按id进行搜索且formData.write_number为空
					this.formData.write_number = ''
					this.getCardType() //获取可核销的卡
				} else if (this.type == 0) { //普通商品时候
					this.showTips = true
					this.formData.write_number = '' //不用调取需要核销的卡，直接可以核销
					this.writeData.id = this.codeId //核销的id
					this.type_list = []
				}
				this.$forceUpdate()
				this.showScan = false
				// console.log(result)
			},
			geterror(e) {
				// console.log(e)
				uni.showToast({
					icon: 'none',
					title: e
				})
				this.showScan = false
				// this.$toast(e)
			},
		}
	}
</script>
<style>
	page {
		overflow: hidden;
		padding: 40rpx 20rpx;
	}
</style>
<style lang="scss">
	.select {
		width: 100%;
		z-index: 1;
	}

	.icon_arrow_down {
		position: absolute;
		right: 20rpx;
	}

	.hexiao {
		// background: #FFFFFF;
		// box-shadow: 0px 0px 10px rgba(8, 23, 56, 0.05);
		// border-radius: 8px;
		padding: 40rpx 20rpx;
		padding-bottom: 70rpx;
	}

	.chargeOff {
		padding: 20rpx;
		overflow: scroll;
		background: #FFFFFF;
		box-shadow: 0px 0px 10px rgba(8, 23, 56, 0.05);
		border-radius: 8px;
		padding: 40rpx 20rpx;
		padding-bottom: 70rpx;
		height: 96%;

		.scanCode {
			position: absolute;
			height: 100%;
			width: 100vw;
			top: -20rpx;
			left: -20rpx;
			background: rgba(0, 0, 0, 0.5);
			z-index: 1;
		}

		.tips {
			font-size: 28rpx;
			color: #999;
		}

		.u-demo-block__content {
			margin-top: 20rpx;
			width: 100%;
		}

		.item {
			margin-top: 20rpx;
			display: flex;

			.u-demo-block {
				width: 100%;
			}
		}
	}
</style>